<template>
	<div class="listren">
		<div class="query">
			<div>
				<el-form :inline="true" :model="formInline" class="demo-form-inline swquery">

					<el-form-item label="姓名" class='swfrom'>
						<el-input v-model="formInline.name" size="mini"></el-input>
					</el-form-item>

					<el-form-item label="性别" class='swfrom'>
						<el-select v-model="formInline.sex" placeholder="请选择" size="mini">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="学历">
						<el-select v-model="formInline.xueli" placeholder="请选择" size="mini">
							<el-option label="初中" value="初中"></el-option>
							<el-option label="高中" value="高中"></el-option>
							<el-option label="中专" value="中专"></el-option>
							<el-option label="大专" value="大专"></el-option>
							<el-option label="本科" value="本科"></el-option>
							<el-option label="研究生" value="研究生"></el-option>
							<el-option label="硕士" value="硕士"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="工作年限">
						<el-select v-model="formInline.gznx" placeholder="请选择" size="mini">
							<el-option label="应届毕业生" value="应届毕业生"></el-option>
							<el-option label="1年" value="1年"></el-option>
							<el-option label="2年" value="2年"></el-option>
							<el-option label="3年" value="3年"></el-option>
							<el-option label="4年" value="4年"></el-option>
							<el-option label="5年" value="5年"></el-option>
							<el-option label="6年" value="6年"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="formInline.tel" size="mini" @blur='telyanzheng'></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" @click="onSubmit" size="mini">查询</el-button>
					</el-form-item>
				</el-form>
			</div>

		</div>
		<el-table :data="table" border height='100%' style="height: 100%;">
			<el-table-column prop="name" label="姓名" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="性别" align='center'>
			</el-table-column>
			<el-table-column prop="address" label="年龄" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="学历" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="工作年限" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="手机号码" align='center'>
			</el-table-column>
			
			<el-table-column prop="name" label="登记人" align='center'>
			</el-table-column>
			<el-table-column prop="date" label="登记时间" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="详情" align='center'>
				<template slot-scope="scope">
					<router-link v-bind="{to:'baseDetail/'+scope.row.id}">
						<el-button type="primary" size='mini'>查看</el-button>
					</router-link>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="是否录用" align='center'>
				<template slot-scope="scope">						
						<el-tooltip  placement="top">
							 <div slot="content">{{scope.row.luyong==true?'已录用':'未录用'}}</div>
							 <!--<div slot="content">{{table[scope.$index].row}}</div>-->
							  
							<el-switch v-model="scope.row.luyong"  active-color="#13ce66"   @change='zhuangtai(scope.$index, scope.row)'>
							</el-switch>
						</el-tooltip>
			
				</template>

			</el-table-column>
			<el-table-column prop="name" label="操作" align='center' min-width="138">
				<template slot-scope="scope">
					<router-link v-bind="{to:'modification/'+scope.row.id}">
						<el-button type="warning" size='mini'>修改</el-button>
					</router-link>
						<el-button type="danger" size='mini' @click="del(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pageM">
			<div class="block">
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      luyong: true,
      formInline: {
        name: "",
        sex: "",
        xueli: "",
        gznx: "",
        tel: ""
      },

      table: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市",
          id: "123",
          luyong: true
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市",
          luyong: true
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎0",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎1",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎5",
          address: "上海市",
          luyong: false
        }, {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市",
          luyong: true
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎0",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎1",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市",
          luyong: false
        },
        {
          date: "2016-05-01",
          name: "王小虎5",
          address: "上海市",
          luyong: false
        }
      ]
    };
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log(this.formInline);
    },
    telyanzheng(e) {
      //				去除手机号空格
      let tel = e.srcElement.value.trim();
      let reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
      if (!reg.test(tel)) {
        this.$notify.error({
          title: "错误",
          message: "你输入的手机号不合法"
        });
      }
    },
    zhuangtai(index, row) {
      console.log(index, row);
    },
    del(index, row) {
      console.log(row, index);

      this.$confirm("确定要删除这条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
			let table=this.table;
			table.splice(index,1)
		

          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    var inputlist = document.querySelectorAll(".el-input");
    for (var i = 0; i < inputlist.length; i++) {
      inputlist[i].style.width = "110px";
    }
  }
};
</script>
<style lang="scss" scoped>
.listren {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 40px;
  .query {
    position: absolute;
    z-index: 9;
    width: 100%;
    min-width: 890px;
    height: 40px;
    top: -42px;
    /*background-color: pink;*/
    .swquery {
      display: flex;
      justify-content: space-between;
      min-width: 896px;
    }
    .el-form-item__content {
      width: 50px;
      height: 40px;
    }
  }
  .pageM {
    position: absolute;
    right: 0;
    bottom: -36px;
  }
}
</style>